<template>
  <div>
    <div class="login-boxtitle">
      <a href="home.html"><img alt="logo" src="../../assets/img/logo.png" /></a>
    </div>

    <div class="login-banner" style="background: rgb(80,188,182);">
      <div class="login-main">
        <div class="login-banner-bg"><span></span><img src="../../assets/img/bg1.png" /></div>
        <div class="login-box" id="content">

          <h3 class="title">登录商城</h3>

          <div class="clear"></div>

          <div class="login-form">
            <form>
              <div class="user-name">
                <label for="user"><i class="am-icon-user"></i></label>
                <input type="text" name="" id="user" v-model="account" placeholder="邮箱/手机/用户名">
              </div>
              <div class="user-pass">
                <label for="password"><i class="am-icon-lock"></i></label>
                <input type="password" name="" id="password" v-model="password" placeholder="请输入密码">
              </div>
              <div class="user-pass">
                <label for="password"><i class="am-icon-lock"></i></label>
                <input type="text" name="" v-model="verCode" class="fl" id="password" placeholder="验证码" style="width: 50%">
                <a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">
                  <img class="fl" v-bind:src="codeImg" id="imgVerify" alt="更换验证码" height="36" width="40%" v-on:click="getVerify()">
                </a>
              </div>
            </form>
          </div>

          <div class="login-links">
            <router-link :to="{name:'register'}" class="fr" >找回密码</router-link>
            <span class="fr mr-5 ml-5">|</span>
            <router-link :to="{name:'register'}" class="fr" >注册</router-link>
            <br />
          </div>
          <div class="am-cf">
            <input type="submit" v-bind:disabled="disabled" name="" v-on:click="login()" value="登 录" class="am-btn am-btn-primary am-btn-sm">
          </div>
          <div class="partner">
            <!-- <h3>合作账号</h3> -->
            <div class="am-btn-group" style="text-align:center">
              <i class="am-icon-qq am-icon-sm"></i><span>QQ登录</span></a>
            </div>
          </div>

        </div>
      </div>
    </div>

    <foot></foot>
    <iframe src="http://localhost/index.html" ref="iframe" style="height: 0px;width: 0px;display: none;"></iframe>
  </div>
</template>
<script>
import foot from '@/components/foot.vue'
export default {
  name: 'login',
  data () {
    return {
      codeToken: "",
      codeImg: "",
      verCode: "",
      account: "1850252892@qq.com",
      password: "123456",
      disabled: false,
    }
  },
  components: {
    foot
  },
  mounted () {
    this.getVerify()
  },
  beforeDestroy () {
  },
  methods: {
    getVerify () {
      // var storage = window.localStorage;
      // storage.setItem("AUTHTOKEN", 3);
      // let token = localStorage.getItem('AUTHTOKEN')
      // console.log(token)
      var _this = this;
      this.axios.get("/user/getVerify")
        .then(function (response) {
          var result = response.data;
          if (result.code == 200) {
            var data = result.data;
            _this.codeToken = data.token;
            _this.codeImg = data.img;
          }
        })
    },
    login () {
      var _this = this;
      this.disabled = true;
      var user = {};
      user.verCode = this.verCode;
      user.password = this.$md5(this.password);
      user.account = this.account;
      var codeToken = this.codeToken;
      if (/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(this.account)) {
        user.regType = 0;
      } else if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.account)) {
        user.regType = 1;
      } else {
        _this.disabled = false;
        this.$layer.msg("请输入正确的手机号(邮箱)")
        return;
      }
      this.axios.post("/user/userLogin", user, {
        headers: { "VERCODETOKEN": _this.codeToken }
      })
        .then((response) => {
          var result = response.data;
          var data = result.data;
          if (result.code == 200) {
            var user = data;
            localStorage.setItem("AUTHTOKEN", data.AUTHTOKEN);
            localStorage.setItem("NICKNAME", data.NICKNAME);
            localStorage.setItem("schoolId",data.SCHOOL);
            var msg = JSON.stringify({
              AUTHTOKEN: localStorage.getItem("AUTHTOKEN"),
              NICKNAME: localStorage.getItem("NICKNAME")
            })
            this.$refs.iframe.contentWindow.postMessage(msg, '*');

            if (data.STATUS >= 100) {
              window.setTimeout((data) => {
                this.$router.push({
                  name: "home"
                })
              })

            } else if (data.STATUS == 0) {
              window.setTimeout((data) => {
                this.$router.push({
                  name: "information"
                })
              })
            }

          } else {
            _this.disabled = false;
            _this.getVerify();
            _this.$layer.msg(result.msg);
          }

        })
    }
  }
}
</script>
<style scoped>
@import "../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../assets/css/dlstyle.css";
@import "../../assets/css/common/commonStyle.css";
</style>
